<template>
  <div class="home">
    <map-container>
      <template v-slot>
        <div class="main">
          <div class="left">
            <item-wrap style="height:60%;" title="机构类型">
              <div class="orgtypes">
                <div class="orgitem" v-for="(org, index) in orgTypes" :key="index">
                  <span>{{org.name}}</span>
                  <div class="bg">{{org.value}}</div>
                </div>
              </div>
            </item-wrap>
            <item-wrap style="height:34%;" title="项目投资情况">
              <touzi />
            </item-wrap>
          </div>
          <div class="right">
            <item-wrap style="height:65%;" title="工程许可证申请情况">
              <apply />
            </item-wrap>
            <item-wrap style="height:30%;" title="行业分类">
              <div class="matters">
                <p class="title"><span>行业</span><span>数量</span></p>
                <div style="overflow:hidden">
                <p class="content" :style="'top:' + top + 'px'" v-for="(item, key) in matters" :key="key">
                  <span>{{item.name}}</span> <span>{{item.value}}</span>
                </p>
                </div>
              </div>
            </item-wrap>
          </div>
        </div>
      </template>
    </map-container>
    
  </div>
</template>

<script>
import MapContainer from "./amap.vue";
import ItemWrap from '@/components/item-wrap/item-wrap.vue'
import touzi from '@/views/project/echarts.vue/touzi.vue'
import Street from '@/views/project/echarts.vue/street.vue'
import Apply from '@/views/project/echarts.vue/apply.vue'
var AMap
var timer
export default {
  name: 'HomeView',
  components: {
    MapContainer,
    ItemWrap,
    touzi,
    Apply
  },
  data() {
    return {
      orgTypes: [],
      matters: [],
      top: 60
    }
  },
  mounted() {
    this.getMatters()
    this.getOrganizationType()
  },
  methods: {
    getMatters() {
      this.$get('/engineeringconstruction/getTrade').then(res => {
        this.matters = res.data
        timer = setInterval(() => {
          this.top = this.top - 1
          if(this.top + this.matters.length*20 == 0) {
            this.top = 60
          }
        }, 30)
      })
    },
    getOrganizationType() {
      this.$get('/engineeringconstruction/getOrganizationType').then(res => {
        this.orgTypes = res.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  padding: 100px 50px 0;
  justify-content: space-between;
  height: 80vh;
}
.left {
  display: flex;
  width: 380px;
  // flex: 0 0;
  flex-direction: column;
  justify-content: space-between;
}
.right {
  display: flex;
  width: 380px;
  // flex: 0 0;
  flex-direction: column;
  justify-content: space-between;
}
.matters {
  width: 100%;
  height: 98%;
  color: #fff;
  overflow: hidden;
  .title {
    font-weight: 600;
    font-size: 16px;
  }
  p{
    display: flex;
    justify-content: space-between;
    padding: 0 12px;
  }
  .content {
    position: relative;
    top: 0;
  }
}
.orgtypes {
  pointer-events:all;
  display: flex;
  color: #fff;
  flex-wrap: wrap;
  text-align: center;
  justify-content: space-evenly;
  padding-top: 40px;
  .orgitem{
    width: 30%;
    margin-bottom: 20px;
    // flex: 0 0;
    span {
      // font-size: 20px;
      font-weight: 600;
    }
    .bg {
      font-size: 28px;
      margin-top: 20px;
      color: #cf4;
      font-weight: 700;
      background: url(../../assets/image/icon-numBg.png) no-repeat;
      background-position: 50%;
      height: 85px;
      line-height: 85px;
    }
  }
}
</style>
